<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css02</title>
		<style type="text/css">
			body,
			h2 {
				margin: 0;
			}
			
			/* .nav li {
				color: green;
			}
			.nav>li {
				color: blue;
			} */
			#home {
				color: #ff6700;
			}
			#home~li {
				color: #ff6700;
				text-shadow: 1px 1px 2px #333333 ;
			}
		</style>
	</head>
	<body>
		<!--基础选择器
			选择器的名称          选择器表示                                          大概用途
			
			组合选择符  ：基础选择器之间的一些浏览器能够识别的连接符号，具有不同的意义，配合基础选择器使用，
			     可以省去一些class或者id名的设置，更加精准快速的选择到指定的元素
			 1、并集选择器           元素1,元素2                                 可以把多个基础选择器，合并设置公共属性        提取公共样式，精简代码
			 2、后代选择器           父元素（空格）子元素                   选中父元素下面的所有对应后代元素
			 3、子代选择器           父元素 > 子元素                            选中父元素下面的所有对应子元素
			 4、相邻兄弟选择器   元素1 + 元素2                            只能选择元素1相邻的     后面       对应的同级元素
			 5、通用兄弟选择器   元素1 ~ 元素2                           可以选择元素1              后面的       所有对应的同级元素
			
		-->
		<div class="container">
			<div class="nav">
				<h2>秦皇岛职业技术学院</h2>
				<ul class="nav">
					<li>线上服务</li>
					<li id="home">首页</li>
					<li>企业简介</li>
					<li>机构设置</li>
					<li>产品展示</li>
					
					<li>加盟合作
						<p>电话</p>
						<p>email</p>
					</li>
				</ul>
			</div>
		</div>
		
	</body>
</html>
